<template>
  <a-layout class="app-layout" style="min-height: 100vh">
    <!-- 侧边栏 -->
    <a-layout-sider
        v-model:collapsed="collapsed"
        :collapsible="true"
        :theme="sideTheme"
        :width="240"
        class="custom-sider"
    >
      <div class="sider-logo">
        <router-link to="/">
          <span v-show="!collapsed">车辆管理系统</span>
          <span v-show="collapsed">VMS</span>
        </router-link>
      </div>
      <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          theme="dark"
          mode="inline"
          :inline-collapsed="collapsed"
      >
        <a-menu-item key="/dashboard">
          <template #icon>
            <dashboard-outlined />
          </template>
          <span>数据概览</span>
          <router-link to="/dashboard" />
        </a-menu-item>
        <a-sub-menu key="system" v-if="admin.role==='super_admin'">
          <template #icon>
            <security-scan-outlined />
          </template>
          <template #title>系统管理</template>
          <a-menu-item key="/admin/list">
            <template #icon>
              <account-book-outlined />
            </template>
            <span>管理员列表</span>
            <router-link to="/admin/list" />
          </a-menu-item>
          <a-menu-item key="/user/list">
            <template #icon>
              <account-book-outlined />
            </template>
            <span>用户列表</span>
            <router-link to="/user/list" />
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="vehicle">
          <template #icon>
            <car-outlined />
          </template>
          <template #title>车辆信息管理</template>
          <a-menu-item key="/vehicle/list">
            <template #icon>
              <car-outlined />
            </template>
            <span>车辆信息列表</span>
            <router-link to="/vehicle/list" />
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="driver">
          <template #icon>
            <delivered-procedure-outlined />
          </template>
          <template #title>驾驶员信息管理</template>
          <a-menu-item key="/driver/list">
            <template #icon>
              <delivered-procedure-outlined />
            </template>
            <span>驾驶员信息列表</span>
            <router-link to="/driver/list" />
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="trip">
          <template #icon>
            <car-outlined />
          </template>
          <template #title>出车信息管理</template>
          <a-menu-item key="/trip/list">
            <template #icon>
              <car-outlined />
            </template>
            <span>出车信息列表</span>
            <router-link to="/trip/list" />
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="driverCost">
          <template #icon>
            <dollar-outlined/>
          </template>
          <template #title>行车费用管理</template>
          <a-menu-item key="/driverCost/list">
            <template #icon>
              <dollar-outlined/>
            </template>
            <span>行车费用信息列表</span>
            <router-link to="/driverCost/list" />
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="department">
          <template #icon>
            <deployment-unit-outlined  />
          </template>
          <template #title>部门管理</template>
          <a-menu-item key="/department/list">
            <template #icon>
              <deployment-unit-outlined />
            </template>
            <span>部门信息列表</span>
            <router-link to="/department/list" />
          </a-menu-item>
        </a-sub-menu>
<<<<<<< HEAD
=======
        <a-menu-item key="ai">
          <router-link to="/ai" />
          <template #icon>
            <message-outlined/>
          </template>
          <span>AI问答</span>
        </a-menu-item>
>>>>>>> 629a544 (update)
      </a-menu>
    </a-layout-sider>

    <!-- 主内容区 -->
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header class="custom-header">
        <div class="header-content">
          <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined
              v-else
              class="trigger"
              @click="() => (collapsed = !collapsed)"
          />

          <a-dropdown class="user-dropdown">
            <div class="user-info">
              <a-avatar :size="36" style="background-color: #1890ff">
                <template #icon><user-outlined /></template>
              </a-avatar>
              <span class="username">{{admin.loginName}}</span>
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="handleLogout">
                  <template #icon><logout-outlined /></template>
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content class="main-content">
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>

      <!-- 底部 -->
      <a-layout-footer class="custom-footer">
        Vehicle Management System © 2025 Created by Your Team
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  DashboardOutlined,
  CarOutlined,
    SecurityScanOutlined,
  DeploymentUnitOutlined,
    AccountBookOutlined,
    DollarOutlined,
    DeliveredProcedureOutlined,
<<<<<<< HEAD
  UnorderedListOutlined,
  LineChartOutlined,
  UserOutlined,
  LogoutOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
=======
  MessageOutlined,
  UserOutlined,
  LogoutOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
>>>>>>> 629a544 (update)
} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";

const route = useRoute();
const router = useRouter();
const admin=JSON.parse(localStorage.getItem('admin'))

// 侧边栏状态
const collapsed = ref(false);
const selectedKeys = ref([route.path]);
const openKeys = ref([]);
const sideTheme = ref('dark');

// 监听路由变化更新菜单
watch(() => route.path, (newPath) => {
  selectedKeys.value = [newPath];
  openKeys.value = [newPath.split('/')[1]];
});

// 用户操作
const handleUserCenter = () => {
  router.push('/profile');
};

const handleLogout = () => {
  Modal.confirm({
    title: '确认退出登录吗？',
    //icon: <ExclamationCircleOutlined />,
    onOk() {
      // 执行退出逻辑
      localStorage.removeItem('admin');
      localStorage.removeItem('token');
      router.push('/login');
    }
  });
};
</script>

<style lang="less" scoped>
.app-layout {
  .custom-sider {
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

    .sider-logo {
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #002140;

      a {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;

        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .custom-header {
    background: #fff;
    padding: 0 24px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;

      .trigger {
        font-size: 20px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .user-dropdown {
        cursor: pointer;

        .user-info {
          display: flex;
          align-items: center;
          gap: 12px;

          .username {
            font-weight: 500;
          }
        }
      }
    }
  }

  .main-content {
    margin: 24px 16px;
    padding: 24px;
    background: #fff;
    min-height: calc(100vh - 112px);
    border-radius: 4px;

    .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
    }
  }

  .custom-footer {
    text-align: center;
    padding: 16px 50px;
    background: #f0f2f5;
  }
}

// 过渡动画
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>